<template>
  <div class="accounts">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">银行卡</h1>
        </header>
        <div class="mui-content">
          <div v-for="item in accounts" class="bank-list">
            <p>{{item.bank_name}}</p>
            <p class="account">
              <span v-html="trBankNo(item.account)"></span>
            </p>
          </div>
          <ul class="mui-table-view">
            <li class="mui-table-view-cell">
              <router-link to="/addAccounts" class="add-accounts">
                <span class="iconfont icon-tianjia"></span>
                <div class="mui-media-body">添加银行卡</div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        accounts:null,
      }
    },
    created(){
      this.getAccount();
    },
    methods:{
      //https://raw.githubusercontent.com/digglife/cnbankcard/blob/master/small_logo_sprite.png?raw=true
      //https://raw.githubusercontent.com/digglife/cnbankcard/master/small_logo/ABC.png
      getAccount(){
        var that = this;
        that.$http({url: that.$http.adornUrl(that.$api.getAccount),method:'get',params:that.$http.adornParams()})
          .then(function(res){
            if(res.errno==0){
              that.accounts=res.data;
            }
          })
          .catch(function (err) {
            console.log("错误提示:",err);
          })
      },
      trBankNo(account){
        var str = account,text='';
        if( str && str.length>=4){
          text = "****&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;****&nbsp;&nbsp;&nbsp;&nbsp;"+str.slice(-4);
        }
        return text;
      }
    }
  }
</script>

<style scoped lang="less">
  .accounts{
    .mui-scroll-wrapper{
      background-color: rgba(0, 0, 0, 0.8);
    }
    .mui-bar{
      background-color: rgba(0, 0, 0, 0);
      .mui-title{
        color: #fff;
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.8);
      box-shadow: 0 0px 0px rgba(0, 0, 0, 0.8);
      a {
        opacity: 1;
        color: #fff;
      }
      a:active {
        color: #fff;
      }
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .mui-content{
      background-color: rgba(0, 0, 0, 0);
      .bank-list{
        margin:0.1rem 0.15rem;
        background: #a61612;
        padding: 0.25rem 0.15rem;
        p{
          color:#fff;
        }
        .account{
          font-size: 0.35rem;
        }
      }
      .mui-table-view{
        margin-top:0.3rem;
        background-color: rgba(0, 0, 0, 0);
        .mui-table-view-cell{
          color: #ccc;
          font-size: 0.35rem;
          .add-accounts{
            display: flex;
            flex-direction:row;
          }
          .mui-media-body{
            padding-left:0.3rem;
          }
        }
        .mui-active{
          background-color: #000;
        }
      }
      .mui-table-view:before{
        height:0;
      }
      .mui-table-view:after{
        background-color: rgba(70, 70, 70, 0.7);
      }
    }
  }
</style>
